AJAX学习笔记

您所在的位置：网站首页 › ajax 优点 › AJAX学习笔记

AJAX学习笔记

2023-03-16 02:58| 来源: 网络整理| 查看: 265

URL地址

统一资源定位符，用于标识互联网上每个资源的唯一存放位置组成部分

客户端与服务器之间的通信协议服务器名称具体存放位置在这里插入图片描述

通信过程

请求、处理、响应在这里插入图片描述

资源的请求方式

最常见的两种请求方式为：

get请求通常用于获取服务端资源，如获取HTML文件、数据资源等。post请求通常用于向服务器提交数据，如表单提交等。 AJAX简介

全称为Asynchronous JavaScript And XML，即异步的JavaScript和XML 通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势就是无刷新获取数据

XML简介

可扩展标记语言，被设计用来传输和存储数据，目前已被JSON取代了。在这里插入图片描述

AJAX的优点可以无需刷新通信允许根据用户事件来更新部分页面内容 AJAX的缺点没有浏览历史，无法回退，回退后数据消失存在跨域问题，无法跨越提交请求SEO（搜索引擎优化）不友好，此时爬虫无法获取 jQuery中的Ajax

浏览器中提供的XMLHttpRequest用法笔记复杂，所以jQuery对其进行了封装，降低了Ajax的使用难度。 jQuery中最常用的三个方法如下：

$.get()，获取，将服务器上的资源请求到客户端来进行使用。（data和callback可省略）在这里插入图片描述

$.post()，提交（data和callback可省略）在这里插入图片描述

$.ajax()，提交和获取都可以在这里插入图片描述

接口概念

使用Ajax请求数据时，被请求的URL地址，就叫做数据接口（简称接口）。每个接口必须有请求方式。在这里插入图片描述

XMLHttpRequest的基本使用简介

XMLHttpRequest是浏览器提供的JavaScript对象，可以通过它请求服务器上的数据资源，jQuery就是基于此封装出来的。

发起get请求创建xhr对象调用xhr.open()函数调用xhr.send()函数监听xhr.onreadystatechange事件在这里插入图片描述

post类似 axios 简介

是专注于网络数据请求的库，相比于XMLHttpRequest对象，axios简单易用。相比于jQuery，更加轻量化，只专注于网络数据请求。

发起请求

在这里插入图片描述 post请求返回类似，此处返回的res为axios封装后的数据，总共有六个属性。

config：配置data：响应返回数据headers：响应头request：当前使用AJAX所创建的XMLHttpRequest实例对象status：响应状态码statusText：响应状态文字直接使用axios发起请求

传参时axios会将对象形式转换为JSON形式

get请求，通过params传参在这里插入图片描述

2.post请求，通过data传参在这里插入图片描述

可通过axios.defaults.xxx来调整默认配置项，比如在这里插入图片描述

创建实例对象

axios.create({默认配置}) 在这里插入图片描述

拦截器

分为请求拦截器和响应拦截器，对响应内容进行处理。使用到了Promise 在这里插入图片描述

当设置了多个请求拦截器或多个响应拦截器时，请求拦截器后进先执行，响应拦截器先进先执行

取消请求

可用于避免短时间内重复请求。（发送请求前判断上一次请求处理完没有）在这里插入图片描述

fetch函数请求

在这里插入图片描述

跨域

同源：两个页面的协议、域名和端口都相同，则两个页面具有相同的源在这里插入图片描述同源策略：是浏览器提供的一个安全功能，限制了从同一个源加在的文档或脚本如何与来自另一个源的资源进行交互。即A网站的JavaScript，不允许和非同源的C网站之间进行资源交互。跨域：与同源相反。浏览器对跨域请求的拦截：在这里插入图片描述

跨域解决方法 JSONP：出现的早，兼容性好，临时解决方案，缺点是只支持GET请求。实现原理：利用script标签的跨域能力（还有img、link、，通过< script>标签的src属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据，并没有运用到AJAX。jQuery中的JSONP 在这里插入图片描述

默认情况下使用jQuery发起JSONP请求，会自动携带一个callback=jQueryxxx（随机生成的回调函数名称）的参数。 CORS（Cross-Origin Resource Sharing）：出现较晚，W3C标准官方解决方案，支持GET和POST请求，不需要在客户端做任何特殊的操作，完全在服务器中进行处理，缺点是不兼容某些低版本浏览器。直接在响应体中设置：response.setHeader(“Access-Control-Allow-Origin”,“*”)，表示允许来自所有域的请求。还有多种请求头信息可设置，具体见官方文档。

【本文地址】

AJAX学习笔记

AJAX学习笔记

今日新闻

推荐新闻